<template>
  <div
    :class="{ 'p-pdf': true, home: from == 'home' }"
    :style="bgStyle"
    @mouseenter="enterHome"
    @mouseleave="outHome"
  >
    <div class="header" v-show="from != 'home'">
      <div v-if="recipeId">配方{{ recipeId }}审核预览</div>
      <el-button
        type="primary"
        @click="exportPdf"
        class="btn"
        icon="download"
        :loading="loading"
        v-else
        >导出pdf</el-button
      >
    </div>
    <div
      ref="pdfContainer"
      :class="{ 'pdf-container': true, gun: from == 'home' && animation }"
    >
      <div class="recipe">
        <div class="title">
          <span>配方信息</span>
          <el-icon
            title="预览"
            class="more"
            :size="20"
            v-if="from == 'home'"
            @click="gopreview"
            ><More
          /></el-icon>
        </div>
        <el-form :inline="true" label-width="80">
          <el-form-item label="设备编号">
            <span class="r-value">{{ recipe.deviceCode }}</span>
          </el-form-item>
          <el-form-item label="配方名称">
            <span class="r-value">{{ recipe.recipeName }}</span>
          </el-form-item>
          <el-form-item label="配方编号">
            <span class="r-value">{{ recipe.recipeNo }}</span>
          </el-form-item>
          <el-form-item label="配方版本">
            <span class="r-value">{{ recipe.version }}</span>
          </el-form-item>
          <el-form-item label="客户代码">
            <span class="r-value">{{ recipe.customerCode }}</span>
          </el-form-item>
          <el-form-item label="产品型号">
            <span class="r-value">{{ recipe.productModel }}</span>
          </el-form-item>
          <el-form-item label="包装规范">
            <span class="r-value">{{ recipe.packingCode }}</span>
          </el-form-item>
          <el-form-item label="标签规范">
            <span class="r-value">{{ recipe.packingLabelCode }}</span>
          </el-form-item>
          <el-form-item label="封装形式">
            <span class="r-value">{{ recipe.formFactor }}</span>
          </el-form-item>
          <el-form-item label="含合并盘">
            <span class="r-value">{{
              recipe.hasReelcombine ? "是" : "否"
            }}</span>
          </el-form-item>
          <el-form-item label="是否排序">
            <span class="r-value">{{ recipe.inOrderEnale ? "是" : "否" }}</span>
          </el-form-item>
        </el-form>
      </div>
      <div
        class="block-list"
        v-for="(reel, index) of reelConfig.reelList"
        :key="index"
      >
        <div class="block-config">
          <div class="block" v-if="from != 'home'">
            <DragBlock
              side="front"
              className="canvas"
              :component="reel.frontComponentList"
              shapeType="reel"
              :style="canvasStyle"
              elId="reel-front"
            >
              <div>
                <div class="tip">
                  <!-- {{ getReelType(reel.reelType) }} -->
                  {{ t("editFormula.front") }}
                </div>
                <div class="reel" :style="reelStyle(0)"></div>
              </div>
            </DragBlock>
            <DragBlock
              side="opposite"
              className="canvas opposite"
              :component="reel.oppositeComponentList"
              shapeType="reel"
              :style="canvasStyle"
              elId="reel-opposite"
            >
              <div>
                <div class="tip">
                  <!-- {{ getReelType(reel.reelType)}} -->
                  {{ t("editFormula.opposite") }}
                </div>
                <div class="reel" :style="reelStyle(1)"></div>
              </div>
            </DragBlock>
          </div>
          <div class="config">
            <div class="config-repe">
              <div class="title">卷盘信息</div>
              <el-form label-width="90">
                <!-- <el-form-item label="卷盘名称">
                  <span class="r-value">{{ reel.recipeName }}</span>
                </el-form-item>
                <el-form-item label="卷盘类型">
                  <span class="r-value">
                    {{ getReelType(reel.reelType) }}
                  </span>
                </el-form-item> -->
                <el-form-item label="卷盘料号">
                  <span class="r-value">{{ reelConfig.reelCode }}</span>
                </el-form-item>
                <el-form-item label="卷盘尺寸">
                  <span class="r-value">{{ reelConfig.reelType }}寸</span>
                </el-form-item>
                <el-form-item label="芯片数量">
                  <span class="r-value">{{ reelConfig.baseQuantity }}</span>
                </el-form-item>
                <el-form-item label="泡棉料号">
                  <span class="r-value">{{
                    reelConfig.protectiveTapeCode
                  }}</span>
                </el-form-item>
                <el-form-item label="美纹胶料号">
                  <span class="r-value">{{ reelConfig.maskingTapeCode }}</span>
                </el-form-item>
                <el-form-item label="保护带料号">
                  <span class="r-value">{{ reelConfig.beltCode }}</span>
                </el-form-item>
                <!-- <el-form-item label="卷盘描述">
                  <span class="r-value">{{ reelConfig.reereelDesclNo }}</span>
                </el-form-item> -->
                <el-form-item label="含追溯标签">
                  <span class="r-value">{{
                    reelConfig.traceLabel ? "是" : "否"
                  }}</span>
                </el-form-item>
                <el-form-item label="含追溯标签" v-if="reelConfig.traceLabel">
                  <span class="r-value">{{
                    reelConfig.traceLabelSide == 0 ? "正面" : "反面"
                  }}</span>
                </el-form-item>
                <el-form-item label="不满盘缠绕">
                  <el-checkbox-group v-model="reelConfig.scattered">
                    <el-checkbox label="保护带" value="protectiveTape" />
                    <el-checkbox label="泡棉" value="foam" />
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </div>
            <div class="config-item">
              <div class="title">物料信息</div>
              <div class="cont">
                <template v-if="parseData(reel).label.length > 0">
                  <labelTable :tableData="parseData(reel).label" />
                </template>
                <template v-if="parseData(reel).proLabel.length > 0">
                  <proLabelTable :tableData="parseData(reel).proLabel" />
                </template>
                <template v-if="parseData(reel).humidity.length > 0">
                  <humidityTable :tableData="parseData(reel).humidity" />
                </template>
                <template v-if="parseData(reel).desiccant.length > 0">
                  <descantTable :tableData="parseData(reel).desiccant" />
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="block-list"
        v-for="(mbb, index) of packageConfig.packageList"
        :key="index"
      >
        <div class="block" v-if="from != 'home'">
          <div :style="canvasStyle2" class="canvas" ref="packageFrontRef">
            <div class="tip">
              <!-- {{ getReelType(mbb.reelType) }} -->
              {{ $t("editFormula.front") }}
            </div>
            <DragBlock
              side="front"
              className="package"
              :component="mbb.frontComponentList"
              shapeType="package"
              :style="packageStyle(0)"
              elId="package-front"
            >
              <img
                src="@/assets/images/edit/esd.png"
                class="esd-img"
                :style="esdStyle"
                v-show="packageConfig.hasESD && packageConfig.esdSizeInBag == 0"
              />
            </DragBlock>
          </div>
          <div :style="canvasStyle2" class="canvas" ref="packageOppositeRef">
            <div class="tip">
              <!-- {{ getReelType(mbb.reelType) }} -->
              {{ $t("editFormula.opposite") }}
            </div>
            <DragBlock
              side="opposite"
              className="package"
              :component="mbb.oppositeComponentList"
              shapeType="package"
              :style="packageStyle(1)"
              elId="package-opposite"
            >
              <img
                src="@/assets/images/edit/esd.png"
                class="esd-img"
                :style="esdStyle"
                v-show="packageConfig.hasESD && packageConfig.esdSizeInBag == 1"
              />
            </DragBlock>
          </div>
        </div>
        <div class="config">
          <div class="config-repe">
            <div class="title">包装袋信息</div>
            <el-form label-width="90">
              <el-form-item label="包装袋料号">
                <span class="r-value">{{ packageConfig.bagCode }}</span>
              </el-form-item>
              <el-form-item label="含ESD标签">
                <span class="r-value">{{
                  packageConfig.hasESD ? "是" : "否"
                }}</span>
              </el-form-item>
              <el-form-item label="盘入袋面">
                <span class="r-value">{{
                  packageConfig.reelInMBBUpSide == 0 ? "正面" : "反面"
                }}</span>
              </el-form-item>
              <el-form-item label="盘入角度">
                <span class="r-value">{{ packageConfig.mbBinReelAngle }}</span>
              </el-form-item>
              <el-form-item label="是否抽真空">
                <span class="r-value">{{
                  packageConfig.isNeedSealingVacuum ? "是" : "否"
                }}</span>
              </el-form-item>
              <template v-if="packageConfig.isNeedSealingVacuum">
                <el-form-item label="抽真空时间">
                  <span class="r-value">{{ packageConfig.mbbVacuumTime }}</span>
                </el-form-item>
              </template>
              <el-form-item label="是否热封口">
                <span class="r-value">{{
                  packageConfig.Sealing ? "是" : "否"
                }}</span>
              </el-form-item>
              <template v-if="packageConfig.Sealing">
                <el-form-item label="封口时间">
                  <span class="r-value">{{
                    packageConfig.mbbSealingTime
                  }}</span>
                </el-form-item>
                <el-form-item label="加热次数">
                  <span class="r-value">{{
                    packageConfig.mbbSealingTimes
                  }}</span>
                </el-form-item>
                <el-form-item label="封口距离">
                  <span class="r-value">{{
                    packageConfig.mbbSealingLineDistance
                  }}</span>
                </el-form-item>
              </template>
              <el-form-item label="注入氮气">
                <span class="r-value">{{
                  packageConfig.isNeedSealingNitrogen ? "是" : "否"
                }}</span>
              </el-form-item>
              <!-- <el-form-item label="包装袋描述">
                <span class="r-value">{{ packageConfig.mbbdesc }}</span>
              </el-form-item> -->
              <!-- <el-form-item label="包装袋长度">
                <span class="r-value">{{ packageConfig.bagWidth }}</span>
              </el-form-item>
              <el-form-item label="包装袋宽度">
                <span class="r-value">{{ packageConfig.bagHeigh }}</span>
              </el-form-item> -->
            </el-form>
          </div>
          <div class="config-item">
            <div class="title">物料信息</div>
            <div class="cont">
              <template v-if="parseData(mbb).label.length > 0">
                <labelTable :tableData="parseData(mbb).label" />
              </template>
              <template v-if="parseData(mbb).proLabel.length > 0">
                <proLabelTable :tableData="parseData(mbb).proLabel" />
              </template>
            </div>
          </div>
        </div>
      </div>
      <div
        class="block-list"
        v-for="(box, index) of innerBox.boxList"
        :key="index"
      >
        <div class="config">
          <div class="config-repe">
            <div class="title">内盒信息</div>
            <el-form label-width="90">
              <el-form-item label="内盒料号">
                <span class="r-value">{{ innerBox.boxMaterialCode }}</span>
              </el-form-item>
              <el-form-item label="每盒盘数">
                <span class="r-value">{{ innerBox.bagsPerBox }}</span>
              </el-form-item>
              <el-form-item label="每箱盒数">
                <span class="r-value">{{ innerBox.binsPerBox }}</span>
              </el-form-item>
              <el-form-item label="封胶料号">
                <span class="r-value">{{ innerBox.sealingMaterialCode }}</span>
              </el-form-item>
              <el-form-item label="封胶规格">
                <span class="r-value">{{ innerBox.sealingSpec }}</span>
              </el-form-item>
              <el-form-item label="封胶方式">
                <span class="r-value">{{ innerBox.sealingMode }}</span>
              </el-form-item>
              <el-form-item label="QA标签料号">
                <span class="r-value">{{ innerBox.qaSealsMaterialCode }}</span>
              </el-form-item>
              <el-form-item label="骑缝章料号">
                <span class="r-value">{{
                  innerBox.ridingStampsMaterialCode
                }}</span>
              </el-form-item>
              <el-form-item label="气泡袋料号">
                <span class="r-value">{{
                  innerBox.bubbleBagMaterialCode
                }}</span>
              </el-form-item>
              <el-form-item label="喷隐形码">
                <span class="r-value">{{
                  innerBox.hasBoxSprayCodes ? "是" : "否"
                }}</span>
              </el-form-item>
            </el-form>
          </div>
          <div class="config-item">
            <div class="title">物料信息</div>
            <div class="cont">
              <template v-if="parseData(box, 'box').label.length > 0">
                <labelTable :tableData="parseData(box, 'box').label" />
              </template>
              <template v-if="parseData(box, 'box').proLabel.length > 0">
                <proLabelTable :tableData="parseData(box, 'box').proLabel" />
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, ref } from "vue";
import DragBlock from "../editCanvas/component/dragBlock.vue";
import { reelType } from "@/store/editStore.js";
import { useI18n } from "vue-i18n";
import JsPDF from "jspdf";
import html2canvas from "html2canvas";
import labelTable from "./components/labelTable.vue";
import humidityTable from "./components/humidityTable.vue";
import descantTable from "./components/desicantTable.vue";
import proLabelTable from "./components/proLableTable.vue";
import { More } from "@element-plus/icons-vue";
import reelFrontImg from "@/assets/images/edit/reel.png";
import reelOppositeImg from "@/assets/images/edit/reel-opp.png";
import pkgImg from "@/assets/images/edit/package.png";

let props = defineProps({
  from: {
    type: String,
    default: "",
  },
  storeJson: {
    type: Object,
    default: () => {},
  },
});
let { t } = useI18n();

let pdfContainer = ref();
let loading = ref(false);
let animation = ref(true);

let store = computed(() => {
  return props.from == "home"
    ? props.storeJson
    : JSON.parse(sessionStorage.getItem("reel-state"));
});
store.value.selectedComponent = {};
let urlParams = new URLSearchParams(window.location.search);

let recipeId = ref();
recipeId.value = urlParams.get("recipeId"); // 获取 param1 的值

let recipe = computed(() => store.value.recipe);
let reelConfig = computed(() => store.value.reelConfig);
let packageConfig = computed(() => store.value.packageConfig);
let innerBox = computed(() => store.value.innerBox);
let reelStyle = computed(() => (t) => {
  let reelConfig = store.value.reelConfig;
  let backgroundImage = "";
  if (t == 0) {
    //正面
    backgroundImage = reelConfig.frontImg
      ? `url(${reelConfig.frontImg})`
      : `url(${reelFrontImg})`;
  } else {
    backgroundImage = reelConfig.oppositeImg
      ? `url(${reelConfig.oppositeImg})`
      : `url(${reelOppositeImg})`;
  }
  return {
    backgroundImage,
    backgroundSize: "cover",
    width: reelConfig.reelDiameter + "px",
    height: reelConfig.reelDiameter + "px",
  };
});
let packageStyle = computed(() => (t) => {
  let packageConfig = store.value.packageConfig;
  let backgroundImage = "";
  if (t == 0) {
    //正面
    backgroundImage = packageConfig.frontImg
      ? `url(${packageConfig.frontImg})`
      : `url(${pkgImg})`;
  } else {
    backgroundImage = packageConfig.oppositeImg
      ? `url(${packageConfig.oppositeImg})`
      : `url(${pkgImg})`;
  }
  return {
    backgroundImage,
    width: packageConfig.bagWidth + "px",
    height: packageConfig.bagHeigh + "px",
  };
});
let canvasStyle = computed(() => {
  let reelConfig = store.value.reelConfig;
  return {
    width: reelConfig.reelDiameter + 150 + "px",
    height: reelConfig.reelDiameter + 150 + "px",
  };
});
let canvasStyle2 = computed(() => {
  let packageConfig = store.value.packageConfig;
  return {
    width: packageConfig.bagWidth + 150 + "px",
    height: packageConfig.bagHeigh + 150 + "px",
  };
});
let esdStyle = computed(() => {
  return {
    width: "60px",
    height: "60px",
    position: "absolute",
    left: store.value.packageConfig.esdPositionX + "px",
    top: store.value.packageConfig.esdPositionY + "px",
    transform: `rotate(${store.value.packageConfig.esdPositionR}deg)`,
  };
});

let bgStyle = computed(() => {
  let bgc = props.from == "home" ? "transpant" : "#fff";
  let color = props.from == "home" ? "#eee" : "#444";
  return {
    background: bgc,
    color,
  };
});

function exportPdf() {
  loading.value = true;
  html2canvas(pdfContainer.value, {
    allowTaint: true,
    useCORS: true, // 允许跨域图片 当图片是链接地址时，需加该属性，否组无法显示图片
    backgroundColor: "#FFFFFF",
    imageTimeout: 0, // 图片加载延迟，默认延迟为0，单位毫秒
    height: pdfContainer.value.scrollHeight, // canvas的高度设定
    width: pdfContainer.value.scrollWidth, // canvas的宽度设定
    dpi: 120, // 将分辨率提高到特定的DPI
  })
    .then((canvas) => {
      // 未生成pdf的html页面高度
      var leftHeight = canvas.height;

      var a4Width = 595.28;
      var a4Height = 841.89; // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
      // 一页pdf显示html页面生成的canvas高度;
      var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height);

      // pdf页面偏移
      var position = 0;

      var pageData = canvas.toDataURL("image/jpeg", 1.0);

      var pdf = new JsPDF("p", "pt", "a4"); // A4纸，纵向
      var pdf2 = new JsPDF("p", "pt", "a4"); // A4纸，纵向

      // var index = 1
      var canvas1 = document.createElement("canvas");
      var height;
      pdf.setDisplayMode("fullwidth", "continuous", "FullScreen");
      pdf2.setDisplayMode("fullwidth", "continuous", "FullScreen");

      var pdfName = "配方";

      // eslint-disable-next-line no-irregular-whitespace
      function createImpl(canvas) {
        // 获取第一个文件总页数
        let targetPage = pdf.internal.getNumberOfPages();
        if (leftHeight > 0) {
          // index++
          var checkCount = 0;
          if (leftHeight > a4HeightRef) {
            var i = position + a4HeightRef;
            for (i = position + a4HeightRef; i >= position; i--) {
              var isWrite = true;
              for (var j = 0; j < canvas.width; j++) {
                var c = canvas.getContext("2d").getImageData(j, i, 1, 1).data;
                if (c[0] !== 0xff || c[1] !== 0xff || c[2] !== 0xff) {
                  isWrite = false;
                  break;
                }
              }
              if (isWrite) {
                checkCount++;
                if (checkCount >= 10) {
                  break;
                }
              } else {
                checkCount = 0;
              }
            }
            height =
              Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
            if (height <= 0) {
              height = a4HeightRef;
            }
          } else {
            height = leftHeight;
          }
          canvas1.width = canvas.width;
          canvas1.height = height;
          var ctx = canvas1.getContext("2d");
          ctx.drawImage(
            canvas,
            0,
            position,
            canvas.width,
            height,
            0,
            0,
            canvas.width,
            height
          );
          // eslint-disable-next-line no-unused-vars
          var pageHeight = Math.round((a4Width / canvas.width) * height);
          // pdf.setPageSize(null, pageHeight)
          if (position !== 0 && targetPage < 30) {
            pdf.addPage();
          } else if (position !== 0) {
            // 超过30页，图片添加到第二个文件
            pdf2.addPage();
          }
          if (targetPage < 30) {
            pdf.addImage(
              canvas1.toDataURL("image/jpeg", 1.0),
              "JPEG",
              10,
              10,
              a4Width - 20,
              (a4Width / canvas1.width) * height - 20
            );
          } else {
            // 超过30页，图片添加到第二个文件
            pdf2.addImage(
              canvas1.toDataURL("image/jpeg", 1.0),
              "JPEG",
              10,
              10,
              a4Width - 20,
              (a4Width / canvas1.width) * height - 20
            );
          }
          leftHeight -= height;
          position += height;
          if (leftHeight > 0) {
            setTimeout(createImpl, 500, canvas);
          } else {
            // 获取第二个文件总页数
            let targetPage2 = pdf2.internal.getNumberOfPages(); // 获取总页
            if (targetPage2 > 1) {
              // 第二个文件有内容时，一起导出
              pdf2.deletePage(1); // 删除第一张空白页
              pdf2.save(pdfName + ".pdf");
            }
            pdf.save(pdfName + ".pdf");
          }
        }
      }

      // 当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < a4HeightRef) {
        pdf.addImage(
          pageData,
          "JPEG",
          10,
          10,
          a4Width - 20,
          (a4Width / canvas.width) * leftHeight - 20
        );
        pdf.save(pdfName + ".pdf");
      } else {
        try {
          pdf2.deletePage(0);
          pdf.deletePage(0);
          setTimeout(createImpl, 500, canvas);
        } catch (err) {}
      }
      loading.value = false;
    })
    .catch((err) => {
      console.error(err);
      loading.value = false;
    });
}

function parseData(item, type) {
  let data =
    type == "box"
      ? [
          ...item.leftComponentList,
          ...item.downComponentList,
          ...item.rightComponentList,
          ...item.upComponentList,
          ...item.frontComponentList,
          ...item.backComponentList,
        ]
      : [...item.frontComponentList, ...item.oppositeComponentList];
  let label = [];
  let humidity = [];
  let desiccant = [];
  let proLabel = [];
  data.forEach((d) => {
    if (d.type === "Labels") {
      label.push(d);
    } else if (d.type === "Humidity") {
      humidity.push(d);
    } else if (d.type === "Desiccant") {
      desiccant.push(d);
    } else if ((d.type = "ProLable")) {
      proLabel.push(d);
    }
  });
  return {
    label,
    humidity,
    desiccant,
    proLabel,
  };
}

function getReelType(val) {
  let name = "";
  for (let item of reelType) {
    if (item.value == val) {
      return (name = item.label);
    }
  }
}

function gopreview() {
  sessionStorage.setItem("reel-state", JSON.stringify(props.storeJson));
  window.open("#/pdf/preview");
}

function enterHome() {
  animation.value = false;
}

function outHome() {
  animation.value = true;
  props.from == "home" &&
    pdfContainer.value.scrollIntoView({
      behavior: "smooth",
    });
}
</script>

<style scoped lang="scss">
.p-pdf {
  width: 100%;
  height: 100%;
  // background: #eee;
  overflow: auto;
  :deep(.el-form-item__label) {
    color: #444;
  }
  .header {
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 40px;
    .btn {
      height: 30px;
      line-height: 30px;
    }
    border-bottom: 1px dashed;
  }
  .pdf-container {
    padding: 5px;
  }
  .recipe {
    border: 1px solid #666;
    padding: 0 10px;
    .title {
      display: flex;
      justify-content: space-between;
      .more {
        cursor: pointer;
        &:hover {
          color: aqua;
        }
      }
    }
    .r-value {
      min-width: 140px;
    }
  }
  .block-list {
    width: 100%;
    .block {
      display: flex;
      justify-content: space-around;
      .canvas {
        background-color: rgba(214, 220, 242, 0.9);
        position: relative;
        padding: 20px;
        .tip {
          position: absolute;
          top: 5px;
          left: 5px;
          color: #000;
          font-size: 14px;
          font-weight: bold;
        }
        .reel {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          z-index: 1;
          background-image: url("../../../assets/images/edit/reel.png");
          background-size: cover;
        }
        .package {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          // background-color: #403dea;
          z-index: 0;
          background-image: url("../../../assets/images/edit/package.png");
          background-size: cover;
          border: 1px solid #fff;
        }
      }
      .opposite {
        .reel {
          background-image: url("../../../assets/images/edit/reel-opp.png");
        }
      }
    }
    .config {
      // margin-top: 10px;
      display: flex;
      justify-content: space-around;
      // pointer-events: none;
      border: 1px solid #999;
      .config-repe {
        width: 240px;
        border-right: 1px solid #999;
        padding: 0 10px;
        .title {
          height: 30px;
          line-height: 30px;
        }
        .r-value {
          width: 100%;
          word-break: break-word;
          line-height: 20px;
        }
      }
      .config-item {
        flex: 1;
        // margin-left: 10px;
        // border: 1px solid #666;
        padding: 0 10px;
        .title {
          height: 30px;
          line-height: 30px;
        }
        .cont {
          display: flex;
          flex-wrap: wrap;
        }
      }
    }
  }
}
.el-form-item {
  margin-bottom: 0;
}
.home {
  :deep(.el-form-item__label) {
    color: #ccc;
  }
  .gun {
    animation: up 30s linear infinite;
  }
}
@keyframes up {
  0% {
    transform: translateY(0);
  }
  4% {
    transform: translateY(0);
  }
  24% {
    transform: translateY(-23%);
  }
  40% {
    transform: translateY(-23%);
  }
  60% {
    transform: translateY(-46%);
  }
  80% {
    transform: translateY(-46%);
  }
  100% {
    transform: translateY(-70%);
  }
}
</style>
